<template>
	<el-breadcrumb separator="/" :separator-icon="ArrowRight" class="navbar-breadcrumb">
		<el-breadcrumb-item key="home">
			<span>{{ $t('router.home') }}</span>
		</el-breadcrumb-item>
		<el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
			<span>{{ getTitle(item) }}</span>
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script setup lang="ts">
import { useI18n } from '#imports';
import { ArrowRight } from '@element-plus/icons-vue';
import { computed } from 'vue';

const routerStore = useStore.routerStore();
const route = useRoute();
const { locale } = useI18n();

const breadcrumb = computed(() => {
	let path = route.path;
	if (!isCnLocale(locale.value)) {
		const idx = path.indexOf('/', 2);
		path = route.path.substring(idx);
	}
	const breadcrumbs = routerStore.getBreadcrumbs(path);
	return breadcrumbs;
});

const getTitle = (meta: any) => {
	return getLocaleTitle(locale.value, meta);
}
</script>

<style lang="less" scoped>
.navbar-breadcrumb {
	::v-deep(.el-breadcrumb__inner) {
		color: var(--theme-header-text-color) !important;
	}
	padding-left: 10px;
}
</style>
